<template>
  <!-- 管理员页面 -->
  <div class="userbox">
    <div class="addbox">
      <el-button size="mini" @click="handleEdit()">增加</el-button>
    </div>
    <div class="addbox">
      <el-input
        v-model="input"
        placeholder="请输入账号"
        v-on:input="find"
      ></el-input>
      <span class="iconfont icon-sousuo" @click="findall"></span>
    </div>
    <el-table
      :data="
        administratorarr.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="managementCode" label="管理员账号" width="180">
      </el-table-column>
      <el-table-column prop="identity" label="角色">
        <template slot-scope="scope">
          <p v-if="scope.row.identity == 2">超级管理员</p>
          <p v-else>普通管理员</p>
        </template>
      </el-table-column>
      <el-table-column prop="identity" label="状态">
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch($event, scope.row, scope.$index)"
            v-model="scope.row.flag"
            v-if="scope.row.identity != 2"
            :disabled="quanxian == 2 ? false : true"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            :disabled="del == 2 ? false : true"
            v-if="scope.row.identity != 2"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>

    <!-- 弹出框 -->
    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            v-on:input="account"
            v-model="zhanghao"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            v-on:input="password"
            v-model="mima"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="truebtn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 账号
      zhanghao: "",
      mima: "",
      sss: false,
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 10,
      totalCount: 0,
      input: "",
      region: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      //初始页
      currentPage: 1,
      quanxian: 0,
      // 删除权限
      del: 0,
      totalCount: 0,
      //用户管理数组
      // 管理员
      administratorarr: [],
    };
  },
  methods: {
    // 状态
    changeSwitch(data, b, index) {
      this.$axios
        .post("api/admin/deleteById", {
          id: b.id,
          identity: b.identity,
        })
        .then((res) => {
          console.log(res);
        });
    },

    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 查询
    find(e) {
      this.input = e;
    },
    // 点击按钮模糊查询
    findall() {
      console.log(this.input);
      this.$axios
        .get(`api/admin/getAdmin?managementCode=${this.input}`, {})
        .then((res) => {
          this.administratorarr = res.data.data;
        });
    },
    // 增加
    handleEdit() {
      this.dialogFormVisible = true;
    },
    // 账号
    account(e) {
      this.zhanghao = e;
    },
    password(e) {
      this.mima = e;
    },
    truebtn() {
      this.dialogFormVisible = false;
      this.$axios
        .post("api/admin/insertAdmin", {
          managementCode: this.zhanghao,
          password: this.mima,
        })
        .then((res) => {
          this.getalldata();
        });
    },
    // 删除
    handleDelete(index, row) {
      this.$axios
        .post("api/admin/deleteById", {
          id: row.id,
          identity: 0,
        })
        .then((res) => {
          this.administratorarr.splice(index, 1);
        });

      console.log(index, row.id);
    },
    getalldata() {
      // 获取所有管理员
      this.$axios.get("api/admin/getAll").then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          if (res.data.data[i].identity == 1) {
            res.data.data[i].flag = true;
          } else if (res.data.data[i].identity == "-1") {
            res.data.data[i].flag = false;
          }
        }
        this.administratorarr = res.data.data;
        this.totalCount = res.data.data.length;
      });
    },
  },
  mounted() {
    // 获取本地存储的权限
    this.quanxian = sessionStorage.getItem("identity");
    this.del = sessionStorage.getItem("identity");
    this.getalldata();
  },
};
</script>
<style scoped>
.addbox {
  display: flex;
  align-content: space-around;
  margin: 10px 10px 20px 10px;
  width: 300px;
}
.userbox {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.addbox > input {
  margin-right: 10px;
}
</style>